<template>
	<view class="columnbox wdh-100 content" v-if="doctor">
		<view class="color-box"></view>
		<view class="columnbox one-info">
			<view class="rowbox wdh-100 one-ys als">
				<image :src="doctor.logo" mode="aspectFill" class="ys-img"></image>
				<view class="columnbox als  ys-info">
					<view class="rowbox wdh-100 spb ys-name">
						<view class="rowbox">
							{{doctor.name}} <text>{{doctor.zhicheng}}</text>
						</view>
						<view class="rowbox">
							<view class="rowbox gz-box" @click="addFollow">
								<image src="/static/img/like.png" mode="widthFix"></image>
								{{ifgz==1?'关注':'已关注'}}
							</view>
							<view class="rowbox gz-box">
								<image src="/static/img/share.png" mode="widthFix"></image>
								分享
							</view>
						</view>
					</view>
					<view class="rowbox yy-detail">
						<view>{{doctor.keshi}}</view>
						<text> | </text>
						<view>{{doctor.jigou}}</view>
					</view>
				</view>

			</view>
			<view class="wdh-100 ys-sc"><text style="color: #000;">擅长：</text> {{doctor.sljb}}</view>
			<view class="wdh-100 ys-sc"><text style="color: #000;">简介：</text>{{doctor.content}}</view>
		</view>
		<view class="columnbox wdh-100 score-box">
			<!-- <view class="rowbox wdh-100 spb">
                <view class="columnbox score-info">
                    <view class="score-num"><text style="font-size: 32rpx;font-weight: bold;">5.0</text> 推荐</view>
                    <view class="score-desc">患友推荐分</view>
                </view>
                <view class="columnbox score-info">
                    <view class="score-num-n"> 9217</view>
                    <view class="score-desc">接诊人次</view>
                </view>
                <view class="columnbox score-info">
                    <view class="score-num-n"> {{doctor.myd}}%</view>
                    <view class="score-desc">满意度</view>
                </view>
                <view class="columnbox score-info">
                    <view class="score-num-n">正常</view>
                    <view class="score-desc">接诊速度</view>
                </view>
            </view> -->
			<view class="sc-box wdh-100 rowbox spb">
				<image src="/static/img/zysc.svg" mode="widthFix" style="width: 120rpx;height: 100rpx;"></image>
				<view style="width: 500rpx;">
					<text style="margin-right: 10rpx;font-size: 24rpx;line-height: 40rpx;"
						v-for="(item,index) in doctorsljb" :key='index'>{{item.name}}</text>
				</view>
			</view>
			<view class="rowbox wdh-100 spb tw-box">
				<view class="rowbox">
					<image src="/static/img/twwz.svg" mode="widthFix" class="tw-img"></image>
					<view class="columnbox als">
						<view class="tw-title">图文问诊 <text>¥{{doctor.fwprice}}/次</text> </view>
						<view class="tw-gt" v-if="workflag">图文多轮沟通</view>
						<view class="tw-gt" v-else>工作时间：{{doctor.inttime}}~{{doctor.endtime}}</view>
					</view>
				</view>
				<view v-if="workflag" @click="goChat" class="rowbox wz-btn">去问诊</view>
			</view>
		</view>
		<view class="columnbox comment-box" v-if="doctor.plnum>0">
			<view class="rowbox wdh-100 spb comment-title">
				<view class="rowbox">
					患者评价 <text style="font-size: 24rpx;font-weight: normal;margin-left: 10rpx;">{{doctor.plnum}}条</text>
				</view>
				<view @click="showMoreComment" class="rowbox comment-more">更多 <u-icon color="#bababa" name="arrow-right"
						size="24rpx"></u-icon>
				</view>
			</view>
			<view class="rowbox wdh-100 spb" style="margin: 32rpx 0;padding: 0 20rpx;">
				<view class="columnbox score-info" style="border-right: #dfe2e5 solid 1px;padding-right: 70rpx;">
					<view class="score-num"><text style="font-size: 40rpx;font-weight: bold;">{{doctor.myd}}</text>%
					</view>
					<view class="score-desc" style=" margin-top: 10rpx;">满意度</view>
				</view>
				<view class="rowbox spb" style="width: 400rpx;">
					<view class="columnbox als">
						<view class="rowbox score-info">
							<view class="score-desc">回答及时</view>
							<view class="score-num-n"> {{doctor.hdjsnum}}</view>
						</view>
						<view class="rowbox score-info">
							<view class="score-desc">讲解细致</view>
							<view class="score-num-n"> {{doctor.jjxznum}}</view>
						</view>
					</view>
					<view class="columnbox als">
						<view class="rowbox score-info">
							<view class="score-desc">回答专业</view>
							<view class="score-num-n"> {{doctor.jjxznum}}</view>
						</view>
						<view class="rowbox score-info">
							<view class="score-desc">态度很好</view>
							<view class="score-num-n">{{doctor.tdhhnum}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="columnbox wdh-100 one-comment" v-for="(item,index) in pinlun" :key='index'>
				<view class="rowbox wdh-100 spb">
					<view class="rowbox" style="margin-bottom: 20rpx;">
						<view class="comment-name">{{item.province}}患者</view>
						<u-rate size="24rpx" style="margin-left: 10rpx;" active-color='#16d0ac' :count="5"
							v-model="item.fraction"></u-rate>
					</view>
					<view class="comment-date">{{item.addtime}}</view>
				</view>
				<view class="comment-bq wdh-100">
					<view v-for="(bq,bqindex) in item.biaoqian.split(',')" :key='bqindex'>{{bq}}</view>
				</view>
				<view class="comment-detail wdh-100">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import getdate from '@/utils/time.js'
	export default {
		data() {
			return {
				doctor: '',
				doctorsljb: [],
				ifgz: 1,
				pinlun: [],
				workflag: true, //是否出于工作时间
			};
		},
		onLoad(options) {
			this.id = options.id * 1
			this.getDetail()
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
		},
		methods: {
			//去问诊
			goChat() {
				if (!this.isLogin) {
					this.$toLog()
					return false
				}
				this.$isEditInfo()
				uni.showLoading({

				})

				if (this.doctor.fwprice == 0) {
					uni.hideLoading()
					// this.$req.post('/user/patientadd', {
					// 	id: this.id,
					// 	uid: uni.getStorageSync('uid')
					// }).then(res => {
					// 	uni.navigateTo({
					// 		url: '/pages/chat/detail?id=' + this.doctor.memberid
					// 	})
					// })
					uni.navigateTo({
						url: '/pages/chat/detail?id=' + this.doctor.memberid
					})
				} else {
					this.$req.post('/user/chatDetail', {
						memberid: uni.getStorageSync('userinfo').memberid,
						userid: this.doctor.memberid,
						pageNo: 1,
						pageSize: 1
					}).then(res => {
						uni.hideLoading()
						if (!res.data.data || res.data.data == null || res.data.data.length == 0) {
							uni.navigateTo({
								url: '/pages/doctor/chatPay?id=' + this.id
							})
						} else {
							if (res.data.data[0].classify == 7) {
								uni.navigateTo({
									url: '/pages/doctor/chatPay?id=' + this.id
								})
							} else {
								uni.navigateTo({
									url: '/pages/chat/detail?id=' + this.doctor.memberid
								})
							}
						}
					})
				}
			},
			//全部评价
			showMoreComment() {
				uni.navigateTo({
					url: '/pages/doctor/commentAll?id=' + this.id
				})
			},
			//关注
			addFollow() {
				if (uni.getStorageSync('uid')) {
					this.$req.post('/user/follow', {
						uid: uni.getStorageSync('uid'),
						doctorid: this.id,
						state: this.ifgz
					}).then(res => {
						this.ifgz = this.ifgz == 1 ? 2 : 1
					})
				} else {
					this.$toLog()
				}
			},
			getDetail() {
				let data = {
					id: this.id,
					uid: uni.getStorageSync('uid')
				}
				this.$req.post('/user/doctorinfo', data).then(res => {
					this.doctor = res.data.data.doctor
					this.doctorsljb = res.data.data.doctorsljb
					this.ifgz = res.data.data.ifgz
					res.data.data.pinlun.forEach(resp => {
						resp.addtime = getdate.couponDate(resp.addtime)
					})
					this.pinlun = res.data.data.pinlun
					let date = new Date()
					let h = date.getHours()
					let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
					let start = res.data.data.doctor.inttime.replace(/:/g, '') * 1
					let end = res.data.data.doctor.endtime.replace(/:/g, '') * 1
					let current = (h + '' + m) * 1
					if (start <= current && end > current) {
						this.workflag = true
					} else {
						this.workflag = false
					}
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		background: #F5F8FB;
		min-height: 100vh;
		justify-content: flex-start;
		padding-bottom: 20rpx;
	}

	.one-info {
		background: #fff;
		width: 100%;
		padding-bottom: 40rpx;
	}

	.one-ys {
		width: 100%;
		justify-content: space-between;
		background: linear-gradient(to right, #fafffe, #fafffe);
		padding: 40rpx 32rpx;

		.ys-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
		}

		.ys-info {
			width: calc(100% - 120rpx);
		}

		.ys-name {
			font-size: 32rpx;

			text {
				font-size: 28rpx;
				margin-left: 20rpx;
				color: #959499;
			}
		}

		.yy-detail {
			font-size: 28rpx;
			margin-top: 20rpx;

			text {
				margin: 0 10rpx;
			}
		}
	}

	.ys-sc {
		padding: 0 32rpx;
		font-size: 24rpx;
		margin-top: 20rpx;
		color: #959499;
		box-sizing: border-box;
	}

	.score-box {
		padding: 20rpx 20rpx;
		background: linear-gradient(to bottom, #c6f4e6, #F5F8FB);
		padding-bottom: 100rpx;
	}

	.score-info {
		.score-num {
			color: #14a075;
			font-size: 28rpx;
		}

		.score-desc {
			font-size: 24rpx;
			color: #959499;
		}

		.score-num-n {
			color: #000;
			font-weight: bold;
			font-size: 28rpx;
			margin-left: 20rpx;
		}
	}

	.tw-box {
		background: #fff;
		padding: 32rpx 32rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;

		.tw-img {
			width: 90rpx;
			height: 90rpx;
			margin-right: 20rpx;
		}

		.tw-title {
			color: #505052;
			font-size: 29rpx;
			font-weight: bold;

			text {
				font-size: 24rpx;
				color: #ff6637;
				margin-left: 10rpx;
			}
		}

		.tw-gt {
			font-size: 24rpx;
			color: #959499;
			margin-top: 10rpx;
		}
	}

	.wz-btn {
		background: linear-gradient(to right, #ffa653, #ff6c41);
		color: #fff;
		border-radius: 100rpx;
		padding: 10rpx 32rpx;
		font-size: 24rpx;
		line-height: 32rpx;
	}

	.gz-box {
		margin-left: 20rpx;
		background: rgba(#0fdcad, .1);
		color: #0fdcad;
		border: rgba(#0fdcad, .4) solid 1px;
		font-size: 24rpx;
		padding: 0 20rpx;
		border-radius: 100rpx;
		height: 50rpx;

		image {
			margin-right: 10rpx;
			width: 24rpx;
			height: 24rpx;
		}
	}

	.sc-box {
		background: #f9fffd;
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
	}

	.comment-box {
		background: #fff;
		padding: 20rpx 20rpx;
		width: 710rpx;
		border-radius: 20rpx;
		margin-top: -79rpx;

		.comment-title {
			font-size: 28rpx;
			font-weight: bold;
		}

		.comment-more {
			font-size: 24rpx;
			color: #bababa;
			line-height: 40rpx;
		}

		.one-comment {
			margin-top: 32rpx;
			border-bottom: #F5F8FB solid 1px;
			padding-bottom: 32rpx;
		}

		.comment-name {
			font-size: 24rpx;
			color: #5e5f5f;

		}

		.comment-date {
			font-size: 24rpx;
			color: #bababa;
		}

		.comment-bq {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			view {
				font-size: 24rpx;
				padding: 10rpx 20rpx;
				line-height: 24rpx;
				background: #f5f5f5;
				color: #7f7f7f;
				border-radius: 100rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				transform: scale(.9);
			}
		}

		.comment-detail {
			font-size: 28rpx;
		}
	}

	.work-time {
		font-size: 28rpx;
	}
</style>